import {useState} from 'react';
import "./index.scss"

export default function Item(props){
  const [mouse, setMouse] = useState(false)
  const {id, name, done, dispatch} = props

  // 鼠标移入、移出 改变列表状态
  const handleMouse = (mouse) => {
    return () => {
      setMouse(mouse)
    }
  }

  // 选中、取消选中 改变状态
  const handleChecked = (id) => {
    return (event) => {
      dispatch({
        type: 'chooseTodo',
        id,
        done: event.target.checked
      })
    }
  }

  // 删除
  const handleDel = (id) => {
    // delTodo(id)
    dispatch({
      type: 'del',
      id,
    })
  }
  return (
    <div
      className="todo-item"
      onMouseEnter={handleMouse(true)}
      onMouseLeave={handleMouse(false)}
      style={{background: mouse ? '#505050' : ''}}
    >
      <div className="left">
        <input type="checkbox" checked={done} onChange={handleChecked(id)}/>
        <span>{name}</span>
      </div>
      <button style={{display: mouse ? "block" : "none"}} onClick={() => handleDel(id)}>删除</button>
    </div>
  );
}
